<script setup>
    import { ref, onMounted, onBeforeUnmount } from 'vue'
    import { useRoute  } from 'vue-router'

    const route = useRoute()
    const currentRoute = route.path;
    let el = window
    const oldScrollTop = ref(0)
    const newScrollTop = ref(0);
    const scrollDeltaY = ref(0)

    // 滚动事件
    const handleScroll = () =>{
        if(currentRoute !== '/') return 
        // 赋新值
        newScrollTop.value = el.scrollY
        // 计算鼠标滚动方向
        scrollDeltaY.value = newScrollTop.value - oldScrollTop.value
        // 赋旧值
        oldScrollTop.value = el.scrollY
        // 先计算
        // const monacoEditor = ref()
        // if ( scrollDeltaY.value > 0) {
        //     console.log('向下滚动', monacoEditor.value)
          
        // } else if ( scrollDeltaY.value < 0) {
        //     console.log('向上滚动')
        // }

        // if (newScrollTop.value == 0) {
        //     console.log('到头了')
        // }
        
        
        // console.log('scrollDeltaY',scrollDeltaY.value)
    };
    onMounted(() => {
      el.addEventListener('scroll', handleScroll);
    });

    onBeforeUnmount(() => {
      el.removeEventListener('scroll', handleScroll);
    });
</script>
<template>
    <div class="pageWrapper" :class="$route.path !== '/' ? 'stickyHeader' : newScrollTop <= 20 ? 'fixedHeader' : scrollDeltaY > 0 ? 'showMode' : 'hideMode' ">
        <div class="container">
            <p>滚动距离：{{ newScrollTop }}</p>
        </div>
    </div>
</template>

<style scoped>
.pageWrapper {
    top: 0;
    width: 100%;
    height: 90px;
    transition: .6s;
}
.fixedHeader {
    position: fixed;
    background-color: transparent;
}
.stickyHeader{
    position: sticky;
    background-color: lightblue;
}
.showMode {
    position: fixed;
    background-color: tomato;
    transform: translateY(0%);
}
.hideMode {
    position: fixed;
    background-color: tomato;
    transform: translateY(-100%);
}
</style>